Test your skills: The box model

The aim of this skill test is to help you assess whether you understand the CSS box model.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Interactive challenge

First of all, we are giving you a fun, interactive challenge involving margin shorthand, created by our learning partner, Scrimba.

Watch the embedded scrim, and complete the tasks on the timeline (the little ghost icons) by following the instructions and editing the code. When you are done, you can resume watching the scrim to check how the teacher's solution matches up with yours.

Clicking will load content from scrimba.com

Toggle fullscreen[

Open on Scrimba](https://scrimba.com/learn-html-and-css-c0p/~01s?via=mdn&embed=)

Margin shorthand

Load scrim and open dialog.

Box model 1

In this task, there are two boxes below, one is using the standard box model, the other the alternate box model. We'd like you to change the width of the second box by adding declarations to the .alternate class, so that it matches the visual width of the first box.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

.alternate {
  box-sizing: border-box;
}

The updated styling should look like this:

Play

Click here to show the solution

You will need to increase the width of the second block to add the size of the padding and border:

Box model 2

To complete this task, add the following features to the provided box:

A 5px, black, dotted border.
A top margin of 20px.
A right margin of 1em.
A bottom margin of 40px.
A left margin of 2em.
Padding on all sides of 1em.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">I use the standard box model.</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
}

The updated styling should look like this:

Play

Click here to show the solution

This task involves using the margin, border, and padding properties correctly. You might choose to use the longhand properties (margin-top, margin-right, etc.); however, when setting a margin and padding on all sides, the shorthand is probably the better choice:

Box model 3

In this task, the inline element has a margin, padding, and border. However, the lines above and below are overlapping it.

To complete this task, update the CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">
  <p>
    Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
}

The updated styling should look like this:

Play

Click here to show the solution

Solving this task requires you to understand when to use different display values. After adding display: inline-block, the block direction margin, border and padding will cause the other lines to be pushed away from the element:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Feb 3, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.